<template>
  <div class="search-box">
    <ElInput
      v-model="searchValue"
      :placeholder="placeholder"
      :size="size"
      :clearable="clearable"
      @input="handleInput"
      @clear="handleClear"
      @keyup.enter="handleSearch"
    >
      <template #prefix>
        <ElIcon><Search /></ElIcon>
      </template>
      <template #append>
        <ElButton
          :icon="Search"
          @click="handleSearch"
        />
      </template>
    </ElInput>
    
    <!-- 搜索建议 -->
    <Transition name="fade">
      <div v-if="showSuggestions && suggestions.length > 0" class="suggestions">
        <div
          v-for="(item, index) in suggestions"
          :key="index"
          class="suggestion-item"
          @click="handleSelectSuggestion(item)"
        >
          <ElIcon><Search /></ElIcon>
          <span>{{ item }}</span>
        </div>
      </div>
    </Transition>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { Search } from '@element-plus/icons-vue'

const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  placeholder: {
    type: String,
    default: '请输入搜索内容'
  },
  size: {
    type: String,
    default: 'default'
  },
  clearable: {
    type: Boolean,
    default: true
  },
  // 搜索建议列表
  suggestionList: {
    type: Array,
    default: () => []
  },
  // 是否显示搜索建议
  showSuggestions: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:modelValue', 'search', 'input', 'clear'])

const searchValue = ref(props.modelValue)
const suggestions = ref([])

// 监听 modelValue 变化
watch(() => props.modelValue, (newVal) => {
  searchValue.value = newVal
})

// 监听输入
const handleInput = (value) => {
  emit('update:modelValue', value)
  emit('input', value)
  
  // 过滤搜索建议
  if (value && props.suggestionList.length > 0) {
    suggestions.value = props.suggestionList
      .filter(item => item.toLowerCase().includes(value.toLowerCase()))
      .slice(0, 5)
  } else {
    suggestions.value = []
  }
}

// 搜索
const handleSearch = () => {
  emit('search', searchValue.value)
  suggestions.value = []
}

// 清空
const handleClear = () => {
  emit('clear')
  suggestions.value = []
}

// 选择搜索建议
const handleSelectSuggestion = (item) => {
  searchValue.value = item
  emit('update:modelValue', item)
  emit('search', item)
  suggestions.value = []
}
</script>

<style lang="scss" scoped>
.search-box {
  position: relative;
  width: 100%;
}

.suggestions {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--bg-primary);
  border-radius: $radius-md;
  box-shadow: var(--shadow-lg);
  z-index: 100;
  overflow: hidden;
}

.suggestion-item {
  display: flex;
  align-items: center;
  gap: $spacing-sm;
  padding: $spacing-sm $spacing-md;
  cursor: pointer;
  @include transition(background);
  
  &:hover {
    background: var(--bg-secondary);
  }
  
  .el-icon {
    color: var(--text-secondary);
  }
  
  span {
    flex: 1;
    color: var(--text-primary);
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>

